<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box1 {
				width: 100px;
				height: 100px;
				background-color: red;
				position: relative;
			 
				/* transition: margin-left 3s; */
				
				 
				animation-name: sport;
				animation-duration: 5s;
			}

			@keyframes sport {
				0% {
					 left: 0;
					 top: 0;
				}
				
				25%{
					 left: 500px;
					 top: 0;
				}
				50%{
					 left: 500px;
					 top: 300px;
				}
				75%{
					 left: 0;
					 top:300px;
				}
				100%{
					 left: 0;
					 top: 0;
				}
			}
			
			
			
			.box2{
				width: 200px;
				height: 200px;
				background-color: skyblue;
				margin: 100px auto;
				
				animation-name: myRotate;
				animation-duration: 5s;
				animation-direction: alternate;
				animation-delay: 1s;
				
				/* 
				 通过我们观察  动画是有一定状态的
				 1.等待状态
				 2.执行状态
				 3.结束状态
				 
				 
				 animation-fill-mode: 
				 指定动画等待状态和结束状态的样式
				 none  不做任何改变
				 backwards  让我们等待状态时显示动画第一帧
				 forwards   结束时候保持动画最后一帧的样式
				 both  让我们等待状态时 结束时候保持动画最后一帧
				 
				 
				 */
				animation-fill-mode: both;
				
				
			}
			
			@keyframes myRotate {
				0%{
					transform: rotate(10deg);
				}
				50%{
					transform: rotate(45deg);
				}
				100%{
					transform: rotate(80deg);
				}
				
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		
		<div class="box2"></div>
	</body>
</html>
